<template>
	<view class="search-box">
		<view class="search-bar" v-show="false">
			<input type="text" 
				   v-model="keyword" 
				   placeholder="搜索活动" 
				   @confirm="handleSearch"
				   class="search-input" />
			<text class="search-btn" @click="handleSearch">搜索</text>
		</view>
		<view class="filter-bar">
			<view class="filter-item" 
				  :class="{active: status.value === currentStatus}"
				  v-for="status in statusList"
				  :key="status.value"
				  @click="handleFilter(status.value)">
				{{status.label}}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
	currentStatus: {
		type: String,
		default: ''
	}
})

const emit = defineEmits(['search', 'filter'])

const keyword = ref('')
const statusList = [
	{ label: '全部', value: '' },
	{ label: '未发布', value: 'draft' },
	{ label: '已发布', value: 'published' },
	{ label: '已结束', value: 'ended' }
]

const handleSearch = () => {
	emit('search', keyword.value)
}

const handleFilter = (status) => {
	emit('filter', status)
}
</script>

<style lang="scss">
.search-box {
	background: #fff;
	padding: 20rpx;
	
	.search-bar {
		display: flex;
		align-items: center;
		
		.search-input {
			flex: 1;
			height: 72rpx;
			padding: 0 30rpx;
			background: #f5f5f5;
			border-radius: 36rpx;
			font-size: 28rpx;
		}
		
		.search-btn {
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #007AFF;
		}
	}
	
	.filter-bar {
		display: flex;
		margin-top: 20rpx;
		
		.filter-item {
			padding: 10rpx 30rpx;
			font-size: 26rpx;
			color: #666;
			border-radius: 26rpx;
			margin-right: 20rpx;
			cursor: pointer;
			
			&.active {
				background: #007AFF;
				color: #fff;
			}
		}
	}
}
</style> 